<template>
    <div class="aqpg_wrap">
        <div class="page-content">
            <div class="top-panel">
                <div class="panel-title">系统整体安全状态</div>

                <div class="panel-content">
                    <div class="item-box">
                        <div class="item-title">温度数据监控</div>
                        <div class="chart-box" ref="radarChart1"></div>
                    </div>
                    <div class="item-box">
                        <div class="item-title">压力数据监控</div>
                        <div class="chart-box" ref="radarChart2"></div>
                    </div>
                    <div class="item-box">
                        <div class="item-title">液位数据监控</div>
                        <div class="chart-box" ref="radarChart3"></div>
                    </div>
                    <div class="item-box">
                        <div class="item-title">气体数据监控</div>
                        <div class="chart-box" ref="radarChart4"></div>
                    </div>
                    <div class="item-box">
                        <div class="item-title">流量数据监控</div>
                        <div class="chart-box" ref="radarChart5"></div>
                    </div>
                </div>
            </div>

            <div class="bottom-panel">
                <div class="panel-title">重要环节故障树安全评估</div>

               <div>
                   <span class="icon_hot" v-show="hotList.indexOf( 1 ) !== -1"></span>
                   <span class="icon_hot" v-show="hotList.indexOf( 2 ) !== -1"></span>
                   <span class="icon_hot" v-show="hotList.indexOf( 3 ) !== -1"></span>
                   <span class="icon_hot" v-show="hotList.indexOf( 4 ) !== -1"></span>
                   <span class="icon_hot" v-show="hotList.indexOf( 5 ) !== -1"></span>
                   <span class="icon_hot" v-show="hotList.indexOf( 6 ) !== -1"></span>
               </div>

                <el-tabs class="hy-tabs" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="低温存储功能状态" name="1" class="is_new_info">
                        <div class="dwcc-box">
                            <div class="info-box">
                                <div :class="`info-row ${ alertList.indexOf('1') !== -1 ? 'is_alert' : '' }`">
                                    <div class="row-text">执行机构系统功能故障安全-事故</div>
                                    <div class="row-vertical-line" style="display: block"></div>
                                </div>

                                <br/>
                                <div  :class="`info-row ${ alertList.indexOf('21') !== -1 || alertList.indexOf('22') !== -1 ? 'is_alert' : '' }`">
                                    <div class="row-switch">OR</div>
                                    <div class="row-vertical-line" style="height: 24px;display: block;"></div>

                                    <div :class="`info-row-item ${ alertList.indexOf('21') !== -1 ? 'is_alert' : '' }`" style="text-align: left">
                                        <div class="left-line">
                                            <div class="line-arrows"></div>
                                            <div class="line-across"></div>
                                            <div class="line-arc"></div>
                                        </div>
                                        <div class="row-text">泄漏</div>
                                        <br/>
                                        <div class="row-vertical-line" style="height: 16px;width: 140px;"></div>
                                    </div>

                                    <div :class="`info-row-item ${ alertList.indexOf('22') !== -1 ? 'is_alert' : '' }`" style="text-align: right;">
                                        <div class="right-line">
                                            <div class="line-arc"></div>
                                            <div class="line-across"></div>
                                            <div class="line-arrows"></div>
                                        </div>
                                        <div class="row-text">憋压</div>
                                        <br/>
                                        <div class="row-vertical-line" style="height: 16px;width: 140px;"></div>
                                    </div>
                                </div>

                                <br/>
                                <div class="info-row">
                                    <div :class="`info-row-item ${ alertList.indexOf('31') !== -1 || alertList.indexOf('32') !== -1 ? 'is_alert' : '' }`" style="margin-right: 220px;">
                                        <div class="row-switch">OR</div>
                                        <div class="row-vertical-line" style="height: 4px;display: block;"></div>
                                        <div :class="`row-item ${ alertList.indexOf('31') !== -1 ? 'is_alert' : '' }`" style="text-align: left">
                                            <div class="left-line">
                                                <div class="line-arrows"></div>
                                                <div class="line-across"></div>
                                                <div class="line-arc"></div>
                                            </div>
                                            <div class="row-text">水击</div>
                                            <br/>
                                            <div class="row-vertical-line" style="height: 13px;width: 140px;"></div>
                                        </div>
                                        <div :class="`row-item ${ alertList.indexOf('32') !== -1 ? 'is_alert' : '' }`" style="text-align: right;">
                                            <div class="right-line">
                                                <div class="line-arc"></div>
                                                <div class="line-across"></div>
                                                <div class="line-arrows"></div>
                                            </div>
                                            <div class="row-text" style="line-height: 22px;">管道内<br/>压力异常波动</div>
                                            <br/>
                                            <div class="row-vertical-line" style="height: 72px;width: 140px;"></div>
                                        </div>
                                    </div>

                                    <div :class="`info-row-item ${ alertList.indexOf('33') !== -1 || alertList.indexOf('34') !== -1 ? 'is_alert' : '' }`" >
                                        <div class="row-switch">OR</div>
                                        <div class="row-vertical-line" style="height: 4px;display: block;"></div>
                                        <div :class="`row-item ${ alertList.indexOf('33') !== -1 ? 'is_alert' : '' }`" style="text-align: left">
                                            <div class="left-line">
                                                <div class="line-arrows"></div>
                                                <div class="line-across"></div>
                                                <div class="line-arc"></div>
                                            </div>
                                            <div class="row-text">管道通路异常</div>
                                            <br/>
                                            <div class="row-vertical-line" style="height: 13px;width: 140px;"></div>
                                        </div>
                                        <div :class="`row-item ${ alertList.indexOf('34') !== -1 ? 'is_alert' : '' }`" style="text-align: right;">
                                            <div class="right-line">
                                                <div class="line-arc"></div>
                                                <div class="line-across"></div>
                                                <div class="line-arrows"></div>
                                            </div>
                                            <div class="row-text">泄回异常</div>
                                            <br/>
                                            <div class="row-vertical-line" style="height: 72px;width: 140px;"></div>
                                        </div>
                                    </div>
                                </div>

                                <br/>
                                <div class="info-row">
                                    <div :class="`info-row-item ${ alertList.indexOf('41') !== -1 || alertList.indexOf('42') !== -1 ? 'is_alert' : '' }`">
                                        <div class="row-switch">OR</div>
                                        <div class="row-vertical-line" style="height: 12px;display: block;"></div>
                                        <div :class="`row-item ${ alertList.indexOf('41') !== -1 ? 'is_alert' : '' }`" style="text-align: left">
                                            <div class="left-line">
                                                <div class="line-arrows"></div>
                                                <div class="line-across"></div>
                                                <div class="line-arc"></div>
                                            </div>
                                            <div class="row-text" style="line-height: 22px;">调节阀<br/>开度调节过快</div>
                                        </div>
                                        <div :class="`row-item ${ alertList.indexOf('42') !== -1 ? 'is_alert' : '' }`" style="text-align: right;">
                                            <div class="right-line">
                                                <div class="line-arc"></div>
                                                <div class="line-across"></div>
                                                <div class="line-arrows"></div>
                                            </div>
                                            <div class="row-text" style="line-height: 22px;">截止阀<br/>关闭时间过快</div>
                                        </div>
                                    </div>
                                    <div :class="`info-row-item ${ alertList.indexOf('43') !== -1 || alertList.indexOf('44') !== -1 ? 'is_alert' : '' }`">
                                        <div :class="`row-item ${ alertList.indexOf('43') !== -1 ? 'is_alert' : '' }`" style="text-align: left">
                                            <div class="left-line">
                                                <div class="line-arrows"></div>
                                                <div class="line-across"></div>
                                                <div class="line-arc"></div>
                                            </div>
                                            <div class="row-text">截止阀开度异常</div>
                                            <br/>
                                            <div class="row-vertical-line" style="height: 59px;width: 140px;"></div>
                                        </div>
                                        <div :class="`row-item ${ alertList.indexOf('44') !== -1 ? 'is_alert' : '' }`" style="text-align: right;">
                                            <div class="right-line">
                                                <div class="line-arc"></div>
                                                <div class="line-across"></div>
                                                <div class="line-arrows"></div>
                                            </div>
                                            <div class="row-text">手动阀异常</div>
                                            <br/>
                                            <div class="row-vertical-line" style="height: 59px;width: 140px;"></div>
                                        </div>
                                    </div>
                                    <div :class="`info-row-item ${ alertList.indexOf('45') !== -1 || alertList.indexOf('46') !== -1 ? 'is_alert' : '' }`">
                                        <div class="row-switch">AND</div>
                                        <div class="row-vertical-line" style="height: 12px;display: block;"></div>
                                        <div :class="`row-item ${ alertList.indexOf('45') !== -1 ? 'is_alert' : '' }`" style="text-align: left">
                                            <div class="left-line">
                                                <div class="line-arrows"></div>
                                                <div class="line-across"></div>
                                                <div class="line-arc"></div>
                                            </div>
                                            <div class="row-text" >前端阀门闭合</div>
                                        </div>
                                        <div :class="`row-item ${ alertList.indexOf('46') !== -1 ? 'is_alert' : '' }`" style="text-align: right;">
                                            <div class="right-line">
                                                <div class="line-arc"></div>
                                                <div class="line-across"></div>
                                                <div class="line-arrows"></div>
                                            </div>
                                            <div class="row-text">后端阀门闭合</div>
                                        </div>
                                    </div>
                                    <div :class="`info-row-item ${ alertList.indexOf('47') !== -1 || alertList.indexOf('48') !== -1 ? 'is_alert' : '' }`">
                                        <div class="row-switch">AND</div>
                                        <div class="row-vertical-line" style="height: 12px;display: block;"></div>
                                        <div :class="`row-item ${ alertList.indexOf('47') !== -1 ? 'is_alert' : '' }`" style="text-align: left">
                                            <div class="left-line">
                                                <div class="line-arrows"></div>
                                                <div class="line-across"></div>
                                                <div class="line-arc"></div>
                                            </div>
                                            <div class="row-text" >气动阀粘滞</div>
                                        </div>
                                        <div :class="`row-item ${ alertList.indexOf('48') !== -1 ? 'is_alert' : '' }`" style="text-align: right;">
                                            <div class="right-line">
                                                <div class="line-arc"></div>
                                                <div class="line-across"></div>
                                                <div class="line-arrows"></div>
                                            </div>
                                            <div class="row-text">手动阀异常关闭</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="chart-box">
                                <div :class="`chart-item ${ alertList.indexOf('51') !== -1 ? 'is_alert' : '' }`">
                                    <el-progress type="circle" :percentage="1.58" :stroke-width="16" :width="100" color="#2C50EE"></el-progress>
                                    <div class="chart-item-text">调节阀<br/>开度调节过快</div>
                                </div>
                                <div :class="`chart-item ${ alertList.indexOf('52') !== -1 ? 'is_alert' : '' }`">
                                    <el-progress type="circle" :percentage="1.58" :stroke-width="16" :width="100" color="#2C50EE"></el-progress>
                                    <div class="chart-item-text">截止阀<br/>关闭时间过快</div>
                                </div>
                                <div :class="`chart-item ${ alertList.indexOf('53') !== -1 ? 'is_alert' : '' }`">
                                    <el-progress type="circle" :percentage="1.58" :stroke-width="16" :width="100" color="#2C50EE"></el-progress>
                                    <div class="chart-item-text">机械部件<br/>松动</div>
                                </div>
                                <div :class="`chart-item ${ alertList.indexOf('54') !== -1 ? 'is_alert' : '' }`">
                                    <el-progress type="circle" :percentage="1.58" :stroke-width="16" :width="100" color="#2C50EE"></el-progress>
                                    <div class="chart-item-text">控制信号<br/>波动</div>
                                </div>
                                <div :class="`chart-item ${ alertList.indexOf('55') !== -1 ? 'is_alert' : '' }`">
                                    <el-progress type="circle" :percentage="1.58" :stroke-width="16" :width="100" color="#2C50EE"></el-progress>
                                    <div class="chart-item-text">机械部件<br/>老化</div>
                                </div>
                                <div :class="`chart-item ${ alertList.indexOf('56') !== -1 ? 'is_alert' : '' }`">
                                    <el-progress type="circle" :percentage="1.58" :stroke-width="16" :width="100" color="#2C50EE"></el-progress>
                                    <div class="chart-item-text">误操作</div>
                                </div>
                                <div :class="`chart-item ${ alertList.indexOf('57') !== -1 ? 'is_alert' : '' }`">
                                    <el-progress type="circle" :percentage="1.58" :stroke-width="16" :width="100" color="#2C50EE"></el-progress>
                                    <div class="chart-item-text">调节阀<br/>开度调节过快</div>
                                </div>
                                <div :class="`chart-item ${ alertList.indexOf('58') !== -1 ? 'is_alert' : '' }`">
                                    <el-progress type="circle" :percentage="1.58" :stroke-width="16" :width="100" color="#2C50EE"></el-progress>
                                    <div class="chart-item-text">前端阀门<br/>闭合</div>
                                </div>
                                <div :class="`chart-item ${ alertList.indexOf('59') !== -1 ? 'is_alert' : '' }`">
                                    <el-progress type="circle" :percentage="1.58" :stroke-width="16" :width="100" color="#2C50EE"></el-progress>
                                    <div class="chart-item-text">前端阀门<br/>闭合</div>
                                </div>
                                <div :class="`chart-item ${ alertList.indexOf('60') !== -1 ? 'is_alert' : '' }`">
                                    <el-progress type="circle" :percentage="1.58" :stroke-width="16" :width="100" color="#2C50EE"></el-progress>
                                    <div class="chart-item-text">气动阀<br/>粘滞</div>
                                </div>
                                <div :class="`chart-item ${ alertList.indexOf('61') !== -1 ? 'is_alert' : '' }`">
                                    <el-progress type="circle" :percentage="1.58" :stroke-width="16" :width="100" color="#2C50EE"></el-progress>
                                    <div class="chart-item-text">手动阀<br/>异常关闭</div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="低温运输功能状态" name="2">

                    </el-tab-pane>
                    <el-tab-pane label="低温动力功能状态" name="3">

                    </el-tab-pane>
                    <el-tab-pane label="执行机构系统状态" name="4">

                    </el-tab-pane>
                    <el-tab-pane label="杂志滤除功能状态" name="5">

                    </el-tab-pane>
                    <el-tab-pane label="传感量测功能状态" name="6">

                    </el-tab-pane>
                </el-tabs>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeName: '1',
                hotList: [3,5],
                alertList: ['1', '21', '32', '44', '54'],
            }
        },
        methods: {
            radarChartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs[ obj.id ] );

                var option = {
                    radar: {
                        // shape: 'circle',
                        radius: 55,
                        name: { // (圆外的标签)雷达图每个指示器名称的配置项。
                            formatter: function (value, indicator) {
                                return value;
                            },
                            textStyle: {
                                fontSize: 14,
                                color: '#535763'
                            }
                        },
                        nameGap: 10,
                        axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
                            lineStyle: {
                                color: '#D7DDFC',
                                // 坐标轴线线的颜色。
                                width: 1,
                                // 坐标轴线线宽。
                                type: 'solid',
                                // 坐标轴线线的类型。
                            }
                        },
                        splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
                            lineStyle: {
                                color: ['#3B5DF0','#D7DDFC','#D7DDFC','#D7DDFC','#D7DDFC'],
                                // 分隔线颜色
                                width: 1,
                                // 分隔线线宽
                            }
                        },
                        splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                            show: true,
                            areaStyle: { // 分隔区域的样式设置。
                                color: [ '#C7D1FB', '#DCE1FD','#EBEEFE', '#F7F8FF', '#ffffff' ],
                            }
                        },
                        indicator: obj.indicator,
                    },
                    series: [
                        {
                            name: '',
                            type: 'radar',
                            symbolSize: 5,
                            symbol: 'circle',
                            itemStyle: { // 单个拐点标志的样式设置。
                                color: 'rgba(44,80,238,1)',
                                borderColor: '#ffffff',
                                // 拐点的描边颜色。[ default: '#000' ]
                                borderWidth: 1.5,
                                // 拐点的描边宽度，默认不描边。[ default: 0 ]
                            },
                            lineStyle: { // 单项线条样式。
                                normal: {
                                    opacity: 0.5, // 图形透明度
                                    color: 'rgba(44,80,238,1)',
                                }
                            },
                            areaStyle: { // 单项区域填充样式
                                normal: {
                                    color: 'rgba(44,80,238,0.8)' // 填充的颜色。[ default: "#000" ]
                                }
                            },
                            data: [
                                {
                                    value: obj.value,
                                    name: ''
                                },
                            ]
                        }
                    ]
                };

                chart.setOption( option );
            },

            handleClick(tab, event) {
                console.log(tab, event);
            },
        },
        mounted() {
            this.radarChartLoad(
                {
                    indicator: [
                        { name: '供能设备A', max: 300 },
                        { name: '供能设备B', max: 300 },
                        { name: '供能设备C', max: 300 },
                        { name: '供能设备D', max: 300 },
                        { name: '供能设备E', max: 300 },
                        { name: '供能设备F', max: 300 },
                    ],
                    value: [203, 133, 250, 130, 129, 130, 110, ],
                    id: 'radarChart1',
                }
            );
            this.radarChartLoad(
                {
                    indicator: [
                        { name: '供能设备A', max: 300 },
                        { name: '供能设备B', max: 300 },
                        { name: '供能设备C', max: 300 },
                        { name: '供能设备D', max: 300 },
                        { name: '供能设备E', max: 300 },
                        { name: '供能设备F', max: 300 },
                    ],
                    value: [203, 133, 250, 130, 129, 130, 110, ],
                    id: 'radarChart2',
                }
            );
            this.radarChartLoad(
                {
                    indicator: [
                        { name: '供能设备A', max: 300 },
                        { name: '供能设备B', max: 300 },
                        { name: '供能设备C', max: 300 },
                        { name: '供能设备D', max: 300 },
                        { name: '供能设备E', max: 300 },
                        { name: '供能设备F', max: 300 },
                    ],
                    value: [203, 133, 250, 130, 129, 130, 110, ],
                    id: 'radarChart3',
                }
            );
            this.radarChartLoad(
                {
                    indicator: [
                        { name: '供能设备A', max: 300 },
                        { name: '供能设备B', max: 300 },
                        { name: '供能设备C', max: 300 },
                        { name: '供能设备D', max: 300 },
                        { name: '供能设备E', max: 300 },
                        { name: '供能设备F', max: 300 },
                    ],
                    value: [203, 133, 250, 130, 129, 130, 110, ],
                    id: 'radarChart4',
                }
            );
            this.radarChartLoad(
                {
                    indicator: [
                        { name: '供能设备A', max: 300 },
                        { name: '供能设备B', max: 300 },
                        { name: '供能设备C', max: 300 },
                        { name: '供能设备D', max: 300 },
                        { name: '供能设备E', max: 300 },
                        { name: '供能设备F', max: 300 },
                    ],
                    value: [203, 133, 250, 130, 129, 130, 110, ],
                    id: 'radarChart5',
                }
            );
        }
    }
</script>

<style lang="less">
    .aqpg_wrap {
        width: 100%;
        height: 100%;
        position: relative;

        >.page-content {
            width: 100%;
            padding-bottom: 28px;

            >.top-panel {
                width: 100%;
                height: 362px;
                background: #FFFFFF;
                border-radius: 8px;
                padding: 40px;
                box-sizing: border-box;
                margin-bottom: 28px;

                >.panel-content {
                    width: 100%;
                    height: calc( 100% - 28px - 23px );
                    margin-top: 23px;

                    >.item-box {
                        display: inline-block;
                        vertical-align: top;
                        width: 20%;
                        height: 100%;
                        text-align: center;

                        >.item-title {
                            display: inline-block;
                            width: 150px;
                            height: 36px;
                            line-height: 34px;
                            background: #FFFFFF;
                            border-radius: 4px;
                            border: 1px solid #CFD1D8;
                            box-sizing: border-box;
                            font-size: 16px;
                            color: #0E1526;
                            text-align: center;
                        }

                        >.chart-box {
                            width: 100%;
                            height: calc( 100% - 36px - 32px  );
                            margin-top: 32px;
                            border-right: 1px solid #EEEFF2;
                            box-sizing: border-box;
                        }

                        &:last-child {

                            >.chart-box {
                                border-right: 0;
                            }
                        }

                    }
                }
            }

            >.bottom-panel {
                width: 100%;
                min-height: 1150px;
                background: #FFFFFF;
                border-radius: 8px;
                padding: 40px 0px;
                box-sizing: border-box;
                position: relative;

                >.panel-title {
                    padding: 0 40px;
                }

                .icon_hot {
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    background: #FF3B30;
                    border: 2px solid #FFFFFF;
                    border-radius: 50%;
                    position: absolute;
                    top: 105px;

                    &:nth-of-type( 1 ) {
                        left: 151px;
                    }

                    &:nth-of-type( 2 ) {
                        left: 320px;
                    }

                    &:nth-of-type( 3 ) {
                        left: 486px;
                    }

                    &:nth-of-type( 4 ) {
                        left: 655px;
                    }

                    &:nth-of-type( 5 ) {
                        left: 822px;
                    }

                    &:nth-of-type( 6 ) {
                        left: 990px;
                    }
                }

                >.hy-tabs {
                    margin-top: 40px;
                    position: relative;

                    .el-tabs__nav-scroll {
                        padding: 0 27px;
                    }


                    .dwcc-box {
                        width: 100%;
                        height: 980px;
                        padding: 0 100px;
                        box-sizing: border-box;

                        >.info-box {
                            text-align: center;
                            height: 760px;
                            border-bottom: 1px solid rgba(44, 80, 238, 0.2);

                            >.info-row {
                                display: inline-block;

                                .row-text {
                                    display: inline-block;
                                    width: 140px;
                                    height: 60px;
                                    background: #DFE5FF;
                                    border-radius: 4px;
                                    font-size: 16px;
                                    font-weight: 600;
                                    color: #2C50EE;
                                    text-align: center;
                                    line-height: 42px;
                                    padding: 8px;
                                    box-sizing: border-box;
                                    position: relative;
                                    margin-top: 22px;

                                    &:before {
                                        content: ' ';
                                        position: absolute;
                                        width: 100%;
                                        height: 16px;
                                        background-color: #2C50EE;
                                        border-radius: 8px;
                                        left: 0;
                                        top: -22px;
                                        background-image: url("../../assets/images/aqpg/icon_point.png");
                                        background-repeat: no-repeat;
                                        background-position: 12px center;
                                    }
                                }

                                .row-vertical-line {
                                    display: inline-block;
                                    width: 100%;
                                    height: 61px;
                                    background-image: url("../../assets/images/aqpg/img_vertical_line.png");
                                    background-size: 2px 100%;
                                    background-repeat: no-repeat;
                                    background-position: center;
                                }

                                .row-switch {
                                    display: inline-block;
                                    text-align: center;
                                    width: 46px;
                                    height: 46px;
                                    line-height: 46px;
                                    background-size: 100% 100%;
                                    font-size: 16px;
                                    font-weight: 600;
                                    color: #FFFFFF;
                                    background-image: url("../../assets/images/aqpg/img_circle.png");
                                }

                                .line-arrows {
                                    display: inline-block;
                                    vertical-align: top;
                                    width: 21px;
                                    height: 21px;
                                    background-image: url("../../assets/images/aqpg/img_arrows.png");
                                    background-size: 100% 100%;
                                    position: relative;
                                    top: 11px;
                                }

                                .line-across {
                                    display: inline-block;
                                    vertical-align: top;
                                    height: 100%;
                                    width: calc( 100% - 21px - 13px );
                                    background-image: url("../../assets/images/aqpg/img_across.png");
                                    background-size: 100% 2px;
                                    background-repeat: no-repeat;
                                    background-position: center 11px;
                                }


                                .line-arc {
                                    display: inline-block;
                                    vertical-align: top;
                                    height: 13px;
                                    width: 13px;
                                    background-image: url("../../assets/images/aqpg/img_arc.png");
                                    background-size: 100% 100%;
                                    position: relative;
                                    top: 0px;
                                }

                                .left-line {
                                     width: 100%;
                                     height: 34px;
                                     padding-left: 70px;
                                     box-sizing: border-box;

                                     .line-arrows {
                                         transform: rotateY( 180deg );
                                     }

                                     .line-arc {
                                         transform: rotateY( 180deg );
                                     }
                                 }

                                .right-line {
                                    width: 100%;
                                    height: 34px;
                                    padding-right: 70px;
                                    box-sizing: border-box;
                                }


                                &:nth-of-type( 1 ) {
                                    margin-top: 25px;

                                    .row-text {
                                        width: 320px;
                                    }

                                    .row-vertical-line {
                                        height: 36px;
                                    }

                                    &.is_alert {

                                        >.row-text {
                                            background: #FFE9E8;
                                            color: #FF3B30;

                                            &:before {
                                                background-color: #FF3B30;
                                            }
                                        }

                                        >.row-vertical-line {
                                            background-image: url("../../assets/images/aqpg/img_vertical_line_red.png");
                                        }
                                    }
                                }

                                &:nth-of-type( 2 ) {

                                    .info-row-item {
                                        display: inline-block;
                                        vertical-align: top;
                                        width: 431px;
                                    }
                                }

                                &:nth-of-type( 3 ) {

                                    .info-row-item {
                                        display: inline-block;
                                        vertical-align: top;
                                        width: 500px;

                                        .row-item {
                                            display: inline-block;
                                            vertical-align: top;
                                            width: 250px;
                                        }
                                    }
                                }

                                &:nth-of-type( 4 ) {
                                    position: relative;
                                    top: -64px;

                                    >.info-row-item {
                                        display: inline-block;
                                        vertical-align: top;

                                        .row-item {
                                            display: inline-block;
                                            vertical-align: top;
                                            width: 50%;
                                        }

                                        &:nth-of-type( 1 ) {
                                            width: 290px;
                                            margin-right: 30px;
                                        }

                                        &:nth-of-type( 2 ) {
                                            width: 370px;
                                            margin-right: 30px;
                                            padding-top: 56px;
                                        }

                                        &:nth-of-type( 3 ) {
                                            width: 290px;
                                            margin-right: 70px;
                                        }

                                        &:nth-of-type( 4 ) {
                                            width: 290px;
                                        }
                                    }
                                }

                                &.is_alert {

                                    >.row-switch {
                                        background-image: url("../../assets/images/aqpg/img_circle_red.png");
                                    }

                                    >.row-vertical-line {
                                        background-image: url("../../assets/images/aqpg/img_vertical_line_red.png");
                                    }
                                }

                                .info-row-item.is_alert {

                                    >.row-switch {
                                        background-image: url("../../assets/images/aqpg/img_circle_red.png");
                                    }

                                    .line-arrows {
                                        background-image: url("../../assets/images/aqpg/img_arrows_red.png");
                                    }

                                    .line-across {
                                        background-image: url("../../assets/images/aqpg/img_across_red.png");
                                    }

                                    .line-arc {
                                        background-image: url("../../assets/images/aqpg/img_arc_red.png");
                                    }

                                    .row-text {
                                        background: #FFE9E8;
                                        color: #FF3B30;

                                        &:before {
                                            background-color: #FF3B30;
                                        }
                                    }

                                    .row-vertical-line {
                                        background-image: url("../../assets/images/aqpg/img_vertical_line_red.png");
                                    }
                                }
                            }
                        }

                        >.chart-box {
                            width: 100%;
                            height: calc( 100% - 760px );
                            box-sizing: border-box;
                            text-align: left;
                            padding-top: 39px;

                            >.chart-item {
                                display: inline-block;
                                vertical-align: top;
                                width: 100px;
                                height: 100%;
                                text-align: center;

                                .el-progress {

                                    .el-progress-circle__track {
                                        stroke: #EEEFF2;
                                    }

                                    .el-progress__text {
                                        font-size: 16px;
                                        font-weight: 600;
                                        color: #535763;
                                    }
                                }

                                .chart-item-text {
                                    font-size: 14px;
                                    font-weight: 600;
                                    color: #535763;
                                    margin-top: 5px;
                                }

                                &.is_alert {

                                    .el-progress {

                                        .el-progress-circle__path {
                                            stroke: #FF3B30;
                                        }

                                        .el-progress__text {
                                            color: #FF3B30;
                                        }
                                    }

                                    .chart-item-text {
                                        color: #FF3B30;
                                    }
                                }

                                &:nth-of-type( 1 ) {
                                    margin: 0 50px 0 26px;
                                }

                                &:nth-of-type( 2 ) {
                                    margin: 0 15px 0 0;
                                }

                                &:nth-of-type( 3 ) {
                                    margin: 0 10px 0 0;
                                }

                                &:nth-of-type( 4 ) {
                                    margin: 0 20px 0 0;
                                }

                                &:nth-of-type( 5 ) {
                                    margin: 0 10px 0 0;
                                }

                                &:nth-of-type( 6 ) {
                                    margin: 0 15px 0 0;
                                }

                                &:nth-of-type( 7 ) {
                                    margin: 0 50px 0 0;
                                }

                                &:nth-of-type( 8 ) {
                                    margin: 0 110px 0 0;
                                }

                                &:nth-of-type( 9 ) {
                                    margin: 0 50px 0 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
